﻿<%@ Page Title="Quản Lí Bảng Chữ Cái - Tiếng Nhật Thật Dễ" Language="C#" MasterPageFile="~/Admin/AdminMTP.Master" AutoEventWireup="true" CodeBehind="Alphabets_Plan.aspx.cs" Inherits="SQT.tracnghiem.Admin.Alphabets_Plan" %>

<%@ Import Namespace="DataAccess" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../Content/css/alphabets_plan.css" rel="stylesheet" />
    <script src="../Ajax/JS/Alphabets_Plan.js"></script>
    <script src="../Scripts/writing.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="w3-row w3-padding">
        <div class="w3-threequarter w3-padding-right">
            <ul class="w3-navbar w3-hide-small">
                <li><a href="javascript:;" class="apb-link w3-topbar w3-large w3-white w3-border-teal" onclick="chonbang(event, 'Hiragana')">Hiragana</a></li>
                <li><a href="javascript:;" class="apb-link w3-topbar w3-large w3-grey w3-border-grey" onclick="chonbang(event, 'Katakana')">Katakana</a></li>
                <%--<li><a href="javascript:;" class="apb-link w3-topbar w3-large w3-grey w3-border-grey" onclick="chonbang(event, 'Practive')">Luyện tập</a></li>--%>
            </ul>
            <select class="select-cer-res w3-hide-large w3-hide-medium w3-margin-bottom">
                <option value="1">Hiragana</option>
                <option value="2">Katakana</option>
                <%--<option value="3">Luyện tập</option>--%>
            </select>
            <div id="Hiragana" class="apb-content w3-white">
                <%
                    for (int i = 1; i <= this.hiragana_vertical_max; i++)
                    {
                %>
                <div class="hiragana-row w3-row">
                    <%
                        int count = 0;
                        for (int z = 1; z <= 5; z++)
                        {

                            var get_hiragana_her = new TblAlphabetController().FetchAll().Where(x => x.AlphaType == 1 && x.AlphaVertical == i && x.AlphaHerizontal == z);
                            if (get_hiragana_her.ToList().Count != 0)
                            {
                                count++;
                    %>
                    <div onclick="apb_select('1','<%=i %>','<%=get_hiragana_her.Single().AlphaHerizontal %>')" class="apb-box w3-col l2">
                        <div onclick="edit_apb_item('<%=get_hiragana_her.ToList()[0].Id %>',this)" class="apb-item w3-hover-light-grey" title="Chi tiết">
                            <span class="apb-jp"><%=get_hiragana_her.Single().AlphaName %></span><br />
                            <span class="apb-vn"><%=get_hiragana_her.Single().AlphaTrans %></span>
                            <span class="apb-img-src w3-hide"><%=get_hiragana_her.Single().AlphaPic %></span>
                            <span class="apb-audio-src w3-hide"><%=get_hiragana_her.Single().AlphaSnd %></span>
                        </div>
                    </div>
                    <%}
                    else
                    { %>
                    <div onclick="apb_select('1','<%=i %>','<%=z %>')" class="apb-box w3-col l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <%}
                    }%>
                    <%if (count != 0)
                        { %>
                    <div class="apb-box w3-col l1">
                        <div class="apb-speak-five-btn w3-hover-light-grey w3-hover-text-teal" title="Nghe bộ phát âm">
                            <label class="w3-hide snd_vertical"><%=i %></label>
                            <i class="fa fa-volume-up"></i>
                            <br />
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </div>
                    <%}
                    else
                    {%>
                    <div class="apb-box w3-col l1">
                        <div class="apb-not-speak-five-btn" title="Chưa có chữ cái nào để nghe">
                            <i class="fa fa-volume-up"></i>
                            <br />
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </div>
                    <%} %>
                    <div class="apb-box w3-col l1">
                        <div onclick="delete_apb_five('1','<%=i %>')" class="apb-delete-five-btn w3-hover-light-grey w3-hover-text-teal" title="Xoá bộ phát âm">
                            <i class="fa fa-trash"></i>
                        </div>
                    </div>
                </div>
                <% } %>

                <div class="add-apb-speak-five w3-row">
                    <div onclick="add_apb_select_hiragana('1','1')" class="apb-box w3-col add-apb-herizontal l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_hiragana('1','2')" class="apb-box w3-col add-apb-herizontal l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_hiragana('1','3')" class="apb-box w3-col add-apb-herizontal l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_hiragana('1','4')" class="apb-box w3-col l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_hiragana('1','5')" class="apb-box w3-col l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div class="apb-box w3-col l1">
                        <div class="apb-not-speak-five-btn" title="Chưa có chữ cái nào để nghe">
                            <i class="fa fa-volume-up"></i>
                            <br />
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </div>
                    <div class="apb-box w3-col l1">
                        <div onclick="cancel_add_speak_five(this)" class="apb-cancel-five-btn w3-hover-light-grey w3-hover-text-teal" title="Huỷ bộ phát âm">
                            <i class="fa fa-times"></i>
                        </div>
                    </div>
                </div>
                <div class="w3-padding w3-center">
                    <a onclick="add_speak_five(this)" class="add-apb-speak-five-btn w3-btn w3-teal"><i class="fa fa-download"></i>&nbsp;Tạo bộ phát âm</a>
                </div>
            </div>
            <div id="Katakana" class="apb-content apb-katakana w3-white">
                <%
                    for (int i = 1; i <= this.katakana_vertical_max; i++)
                    {
                %>
                <div class="katakana-row w3-row">
                    <%
                        int count = 0;
                        for (int z = 1; z <= 5; z++)
                        {

                            var get_hiragana_her = new TblAlphabetController().FetchAll().Where(x => x.AlphaType == 2 && x.AlphaVertical == i && x.AlphaHerizontal == z);
                            if (get_hiragana_her.ToList().Count != 0)
                            {
                                count++;
                    %>
                    <div onclick="apb_select('2','<%=i %>','<%=get_hiragana_her.Single().AlphaHerizontal %>')" class="apb-box w3-col l2">
                        <div onclick="edit_apb_item('<%=get_hiragana_her.ToList()[0].Id %>',this)" class="apb-item w3-hover-light-grey" title="Chi tiết">
                            <span class="apb-jp"><%=get_hiragana_her.Single().AlphaName %></span><br />
                            <span class="apb-vn"><%=get_hiragana_her.Single().AlphaTrans %></span>
                            <span class="apb-img-src w3-hide"><%=get_hiragana_her.Single().AlphaPic %></span>
                            <span class="apb-audio-src w3-hide"><%=get_hiragana_her.Single().AlphaSnd %></span>
                        </div>
                    </div>
                    <%}
                    else
                    { %>
                    <div onclick="apb_select('2','<%=i %>','<%=z %>')" class="apb-box w3-col l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <%}
                    }%>
                    <%if (count != 0)
                        { %>
                    <div class="apb-box w3-col l1">
                        <div class="apb-speak-five-btn w3-hover-light-grey w3-hover-text-teal" title="Nghe bộ phát âm">
                            <label class="w3-hide snd_vertical"><%=i %></label>
                            <i class="fa fa-volume-up"></i>
                            <br />
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </div>
                    <%}
                    else
                    {%>
                    <div class="apb-box w3-col l1">
                        <div class="apb-not-speak-five-btn" title="Chưa có chữ cái nào để nghe">
                            <i class="fa fa-volume-up"></i>
                            <br />
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </div>
                    <%} %>
                    <div class="apb-box w3-col l1">
                        <div onclick="delete_apb_five('2','<%=i %>')" class="apb-delete-five-btn w3-hover-light-grey w3-hover-text-teal" title="Xoá bộ phát âm">
                            <i class="fa fa-trash"></i>
                        </div>
                    </div>
                </div>
                <% } %>

                <div class="add-apb-speak-five w3-row">
                    <div onclick="add_apb_select_katakana('2','1')" class="apb-box w3-col add-apb-herizontal l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_katakana('2','2')" class="apb-box w3-col add-apb-herizontal l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_katakana('2','3')" class="apb-box w3-col add-apb-herizontal l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_katakana('2','4')" class="apb-box w3-col l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div onclick="add_apb_select_katakana('2','5')" class="apb-box w3-col l2">
                        <div onclick="add_apb_item(this)" class="add-apb-item-btn w3-hover-light-grey w3-center" title="Thêm chữ cái">
                            <i class="fa fa-plus w3-text-teal"></i>
                        </div>
                    </div>
                    <div class="apb-box w3-col l1">
                        <div class="apb-not-speak-five-btn" title="Chưa có chữ cái nào để nghe">
                            <i class="fa fa-volume-up"></i>
                            <br />
                            <i class="fa fa-long-arrow-right"></i>
                        </div>
                    </div>
                    <div class="apb-box w3-col l1">
                        <div onclick="cancel_add_speak_five(this)" class="apb-cancel-five-btn w3-hover-light-grey w3-hover-text-teal" title="Huỷ bộ phát âm">
                            <i class="fa fa-times"></i>
                        </div>
                    </div>
                </div>
                <div class="w3-padding w3-center">
                    <a onclick="add_speak_five(this)" class="add-apb-speak-five-btn w3-btn w3-teal"><i class="fa fa-download"></i>&nbsp;Tạo bộ phát âm</a>
                </div>
            </div>
            <%--<div id="Practive" class="apb-content apb-practive w3-white w3-row">
                <div class="apb-practive-left w3-third">
                    <div class="w3-padding">
                        <select class="apb-select w3-teal">
                            <option>Chọn bảng chữ cái</option>
                            <option>Hiragana</option>
                            <option>Katakana</option>
                        </select>
                    </div>
                    <header class="w3-center w3-padding-4">Danh sách câu hỏi</header>
                    <div class="w3-padding-left w3-padding-right">
                        <ul class="apb-question-list w3-ul w3-light-grey">
                            <li>cccccccsdsdsadasdadasdasdasdadasdasdasda</li>
                            <li>ccccccc</li>
                            <li>ccccccc</li>
                            <li>ccccccc</li>
                            <li>ccccccc</li>
                            <li>ccccccc</li>
                            <li>ccccccc</li>
                        </ul>
                    </div>
                    <div class="w3-padding w3-center">
                        <a class="w3-btn w3-teal">Thêm câu hỏi</a>
                    </div>
                </div>
                <div class="apb-practive-right w3-twothird">
                    <header class="w3-center w3-padding">Thêm câu hỏi</header>
                    <div class=""><select>
                        <option>Phiên âm</option>
                        <option>Phát âm</option>
                                  </select></div>
                    <div>Phiên âm của <span>a</span> là gì ?</div>
                </div>
            </div>--%>
        </div>
        <div class="apb-detail w3-quarter w3-white w3-topbar w3-border-teal w3-padding">
            <audio src="" id="apb-audio" class="w3-hide"></audio>
            <div id="add-apb-item-form" class="add-apb-item-form">
                <header class="apb-detail-header w3-padding-4 w3-center w3-large">Thêm chữ</header>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Chữ cái</span>
                    <input type="text" id="add-apb-face" placeholder="Nhập chữ cái" class="apb-trans-text w3-center w3-twothird" />
                </div>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Phát âm</span><input type="text" id="add-apb-audio-src" placeholder="Đường dẫn tập tin nghe" class="apb-audio-text w3-twothird w3-center" />
                    <div class="check_snd_file add-apb-review-btn w3-col l1 w3-teal w3-center" title="Nghe trước"><i class="fa fa-eye"></i></div>
                </div>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Phiên âm</span>
                    <input type="text" id="add-apb-trans" placeholder="Nhập phiên âm" class="apb-trans-text w3-center w3-twothird" />
                </div>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Cách viết</span>
                    <input type="text" id="add-apb-img-src" placeholder="Nhập đoạn mã svg" class="apb-trans-text w3-center w3-twothird" />
                    <div class="apb-preview-svg-btn add-apb-review-btn w3-col l1 w3-teal w3-center" title="Xem trước"><i class="fa fa-eye"></i></div>
                </div>
                <div class="w3-border w3-border-light-grey w3-center">
                    <img id="add-apb-img" src="../Content/testdata/picture/no_image.png" alt="Cách viết" class="apb-img" title="Nhập đường dẫn để xem ảnh" />
                    <div class="apb-writing-preview">
                    </div>
                </div>
                <div class="w3-center w3-padding-4">
                    <a class="check-apb-item-btn w3-btn w3-teal"><i class="fa fa-check"></i>&nbsp;Xác nhận</a>
                </div>
            </div>
            <div id="edit-apb-item-form" class="edit-apb-item-form">
                <header class="apb-detail-header w3-padding-4 w3-center w3-large">Chi tiết chữ</header>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Chữ cái</span>
                    <input type="text" id="edit-apb-face" placeholder="Nhập chữ cái" class="apb-trans-text w3-center w3-twothird" />
                </div>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Phát âm</span><input type="text" id="edit-apb-audio-src" placeholder="Đường dẫn tập tin nghe" class="apb-audio-text w3-twothird w3-center" />
                    <div class="edit_check_audio_file add-apb-review-btn w3-col l1 w3-teal w3-center" title="Xem trước"><i class="fa fa-eye"></i></div>
                </div>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Phiên âm</span>
                    <input type="text" id="edit-apb-trans" placeholder="Nhập phiên âm" class="apb-trans-text w3-center w3-twothird" />
                </div>
                <div class="w3-row w3-padding-8">
                    <span class="w3-quarter">Cách viết</span>
                    <input type="text" id="edit-apb-img-src" placeholder="Nhập đường dẫn tập tin ảnh" class="apb-trans-text w3-center w3-twothird" />
                    <div class="apb-preview-edit-svg-btn add-apb-review-btn w3-col l1 w3-teal w3-center" title="Xem trước"><i class="fa fa-eye"></i></div>
                </div>
                <div class="w3-border w3-border-light-grey w3-center">
                    <img id="edit-apb-img" src="" alt="apb image" class="apb-img" />
                    <div class="apb-writing-preview">
                    </div>
                </div>
                <div class="w3-center w3-padding-4">
                    <a class="save-apb-item-btn w3-btn w3-teal"><i class="fa fa-save"></i>&nbsp;Lưu thay đổi</a>
                    <a onclick="delete_apb_item()" class="delete-apb-item-btn w3-btn w3-teal"><i class="fa fa-trash"></i>&nbsp;Xoá</a>
                </div>
            </div>
            <div id="apb-tutorial-text" class="w3-row w3-padding-24 w3-border w3-border-light-grey w3-center w3-padding w3-text-grey">
                <p>Bấm vào chữ để xem chi tiết</p>
                <i class="fa fa-language w3-xxxlarge"></i>
            </div>
        </div>
    </div>
    <div id="delete-apb-five-modal" class="w3-modal">
        <div class="delete-apb-five-modal w3-modal-content w3-animate-top w3-card-8 w3-deep-orange w3-center w3-padding-4 w3-large">
            <p>Bạn có chắc chắn muốn xoá bộ phát âm này ?</p>
            <div class="w3-padding-4">
                <a onclick="btn_accept_del_row()" class="w3-btn w3-deep-orange w3-border w3-border-white w3-hover-white w3-hover-text-deep-orange">Có</a>
                <a onclick="$('#delete-apb-five-modal').fadeOut()" class="w3-btn w3-deep-orange w3-border w3-border-white w3-hover-white w3-hover-text-deep-orange">Không</a>
            </div>
        </div>
    </div>
    <div id="delete-apb-item-modal" class="w3-modal">
        <div class="delete-apb-five-modal w3-modal-content w3-animate-top w3-card-8 w3-deep-orange w3-center w3-padding-4 w3-large">
            <p>Bạn có chắc chắn muốn xoá chữ cái này ?</p>
            <div class="w3-padding-4">
                <a onclick="btn_accept_del_apb()" class="w3-btn w3-deep-orange w3-border w3-border-white w3-hover-white w3-hover-text-deep-orange">Có</a>
                <a onclick="$('#delete-apb-item-modal').fadeOut()" class="w3-btn w3-deep-orange w3-border w3-border-white w3-hover-white w3-hover-text-deep-orange">Không</a>
            </div>
        </div>
    </div>
    <div class="w3-hide" id="check_exits_snd">
        <label class="file_checked">0</label>
    </div>
    <div class="w3-hide" id="check_exits_img">
        <label class="file_checked">0</label>
    </div>
    <div class="w3-hide" id="edt_check_exits_snd">
        <label class="file_checked">0</label>
    </div>
    <div class="w3-hide" id="edt_check_exits_img">
        <label class="file_checked">0</label>
    </div>
    <div id="success-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none; z-index: 10">
        <div class="w3-teal w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
            <header class="w3-large"><i class="fa fa-check"></i>&nbsp;<span id="success_content"></span></header>
        </div>
    </div>
    <div id="error-modal" class="w3-row w3-animate-right" style="position: fixed; right: 25px; bottom: 20%; display: none; z-index: 10">
        <div class="w3-red w3-card-4 w3-center" style="padding: 20px; opacity: 0.9">
            <header class="w3-large"><i class="fa fa-times"></i>&nbsp;<span id="error_content"></span></header>
        </div>
    </div>
</asp:Content>
